<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画布设计器</title>
    <style>
      @keyframes fadeIn {
        from {
          opacity: 0.01;
        }

        to {
          opacity: 1;
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
        }

        to {
          opacity: 0;
        }
      }

      @keyframes slideIn {
        from {
          transform: translateY(20px);
        }

        to {
          transform: translateY(0);
        }
      }

      @keyframes slideOut {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(-20px);
        }
      }

      @keyframes loading-track {
        0% {
          transform: translateX(0) scaleX(0);
        }

        10% {
          transform: translateX(0) scaleX(0.2);
        }

        40% {
          transform: translateX(0) scaleX(0.7);
        }

        60% {
          transform: translateX(60%) scaleX(0.4);
        }

        100% {
          transform: translateX(100%) scaleX(0.2);
        }
      }

      #loading-page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background-color: #fff;
        font-family:
          DIN alternate,
          -apple-system,
          blinkmacsystemfont,
          'Helvetica Neue',
          helvetica,
          segoe ui,
          arial,
          roboto,
          'PingFang SC',
          miui,
          'Hiragino Sans GB',
          'Microsoft Yahei',
          sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        opacity: 0.01;
        animation: 0.4s ease-in-out 1 forwards fadeIn;
      }

      #loading-page.out {
        animation: 14s ease-in-out 14s 1 forwards fadeOut;
        opacity: 1;
      }

      #loading-page-inner {
        max-width: 100%;
        width: 160px;
        margin: auto auto;
        position: relative;
      }

      #loading-page .loading-logo {
        width: 100%;
        text-align: center;
        transform: translateY(20px);
        animation: 0.4s ease-in-out 1 forwards slideIn;
        padding-bottom: 20px;
        font-size: 22px;
        line-height: 30px;
        color: #314666;
      }

      #loading-page.out .loading-logo {
        animation: 0.4s ease-in-out 0.4s 1 forwards slideOut;
        transform: translateY(0);
      }

      #loading-page .loading-progress {
        margin-top: 16px;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        overflow: hidden;
        background-color: #f2f3f9;
        position: relative;
      }

      #loading-page .loading-track {
        height: 100%;
        width: 100%;
        background-color: #1055ff;
        border-radius: 4px;
        transition: 0.4s;
        animation: loading-track 1.3s infinite linear;
        transform-origin: 0 50%;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="loading-page" class="out" style="display: none"
      ><div id="loading-page-inner"
        ><div class="loading-logo">画布设计器</div
        ><div class="loading-progress"
          ><div class="loading-track"></div></div></div
    ></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
